<template>
  <div class="main-content item-box">
    <div class="item-left">
      <div class="column-item layui-row">
        <div class="column-item-title layui-row subject-color font-color1 font-bold">栏目简介</div>
        <div class="jianjie-p layui-row">这是博客当前栏目的简介信息，此处是技术文章栏目，主要分享一些编程技术或者知识点，以及一些Exception和莫名其妙的文章。</div>
      </div>
      <div class="column-item layui-row">
        <div class="column-item-title layui-row subject-color font-color1 font-bold">栏目文章分类</div>
        <GeminiScrollbar
          :autoshow=false
          style="height: 200px" v-if="this.isIe==false">
        <ul class="column-item-ul" style="padding-right: 10px">
          <a  v-for="item in essayGroupInfo" :key="item.id"><li @click="setCurrentGroup(item)">{{item.name}}<span>{{item.num}}篇</span></li></a>
        </ul>
        </GeminiScrollbar>
        <div
          v-if="this.isIe==true"
          style="height: 200px;overflow-y: auto"  >
          <ul class="column-item-ul" style="padding-right: 10px">
            <a  v-for="item in essayGroupInfo" :key="item.id"><li @click="setCurrentGroup(item)">{{item.name}}<span>{{item.num}}篇</span></li></a>
          </ul>
        </div>
      </div>
    </div>
    <div class="item-middle" style="margin-top: 10px">
      <div class="list-param-sort layui-row">
        排序：<span><a href="#" class="chosen-sort">时间(默认)</a></span><span><a href="#">访问量</a></span><span><a href="#">评论数</a></span>
      </div>
      <ul class="article-ul" v-for="item in this.$store.state.blog.searchResult" :key="item.id">
        <li>
          <div class="article-list-row layui-row">
            <div class="article-li-title layui-row">
              <h3 class="font-bold layui-elip"><a @click="eyeEssay(item.id)" style="cursor: pointer">{{item.name}}</a></h3>
            </div>
            <div class="article-li-msg"><div v-html="item.artitleShort"></div></div>
            <div class="article-li-param layui-row">
              2019-01-17 11:05<span>阅读数：529</span><span>评论数：11</span>
            </div>
          </div>
        </li>

      </ul>
      <div class="page-box layui-row">
        <div id="pageItem"></div>
      </div>
    </div>
    <div class="item-right">
      <div class="column-item layui-row">
        <div class="column-item-title layui-row subject-color font-color1 font-bold">栏目简介</div>
        <div class="jianjie-p layui-row">这是博客当前栏目的简介信息，此处是技术文章栏目，主要分享一些编程技术或者知识点，以及一些Exception和莫名其妙的文章。</div>
      </div>

    </div>
  </div>
</template>
<script>
    export default {
        name: "group",
        created() {
          this.getEssayGroup();

        },
      methods:{
        eyeEssay(id){
          let newpage = this.$router.resolve({
            name: 'blogEssayInfo',
            path:'/home/blogEssayInfo',
            query:{
              id:id,

            }
          })

          window.open(newpage.href,'_blank');
        },
        setCurrentGroup(item){
          this.currentGroup=item;
          this.getArtitleInfoByGroupId();
        },
            getEssayGroup(){
              let  that=this;
              this.$axios({
                method: 'get',
                url: '/blog/getArtitleInfo',
              })
                .then(function(res) {
                  that.essayGroupInfo=res.data.data;
                 /* that.currentGroup=res.data.data[0];
                  that.getArtitleInfoByGroupId();*/
                });
            },
        getArtitleInfoByGroupId(){
          let  that=this;
          this.$axios({
            method: 'get',
            url: '/blog/getArtitleInfoByGroupId?groupId='+that.currentGroup.id,
          })
            .then(function(res) {
              that.currentEssays=res.data.data;
            });
        }

        },
         data(){
          return {

             essayGroupInfo:[

             ],
            currentGroup:null,
            currentEssays:[]
          }
      }
    }
</script>

<style scoped>

</style>
